Skip to content

Add real-world examples section to the playground#281

Merged
mrjf merged 7 commits into
mainfrom
copilot/add-real-life-in-browser-examples
May 11, 2026
Merged

Add real-world examples section to the playground#281
mrjf merged 7 commits into
mainfrom
copilot/add-real-life-in-browser-examples

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 6, 2026 •
edited
Loading

The playground had a page per individual feature but nothing showing tsb used end-to-end on realistic data. This adds an Examples section: 10 self-contained, in-browser tutorials covering common pandas workflows.

Hub

  • playground/examples.html — grid of 10 example cards.
  • playground/index.html — new "Real-World Examples" section above the feature roadmap, linking to the hub.

Examples (playground/example_*.html)

Each page has 1–3 editable code blocks with inline realistic data, a Python equivalent tab, and ASCII bar-chart output rendered through console.log.

Example Domain APIs exercised
💰 Sales Dashboard Retail analytics readCsv, groupby().agg, nlargestDataFrame
📈 Stock Returns Finance pctChangeSeries, Series.rolling().mean/std, SMA crossover
🌦️ Weather Trends Climate dt accessor, groupby
👥 Customer Cohorts SaaS growth groupby().size, cumsum, pctChangeSeries
📊 Survey Cross-tabs Research crosstab with normalize: "index"
🪵 Server Log Analysis DevOps Series.map, groupby, pivot, fillna
🧪 A/B Test Results Experimentation groupby().agg, lift, describe
🌐 Web Analytics Pivot Marketing pivotTable (source × device)
⚽ Sports Standings Sports analytics concat, groupby, rankSeries, sortValues
🏷️ Pricing Buckets E-commerce cut with labels, valueCounts

All pages reuse the existing playground-runtime.js (TS-compiler + tsb bundle + transparent-textarea highlighting) — no runtime changes.

Charts

Examples render visual output by emitting unicode block bars through console.log, which the runtime captures and shows in the output panel:

function chart(title: string, rows: Array<[string, number]>): void {
  const max = Math.max(...rows.map(r => r[1]));
  console.log(title);
  for (const [label, value] of rows) {
    const len = Math.round((value / max) * 28);
    console.log(label.padEnd(14) + " | " + "█".repeat(len) + " " + value.toFixed(2));
  }
}

Verification

A Playwright harness loads all 11 new pages, clicks every Run button, and asserts every block runs without error and produces output (22/22 blocks pass). The examples use only existing public tsb APIs; no src/ changes.

Copilot AI assigned Copilot and mrjf May 6, 2026
Copilot AI linked an issue May 6, 2026 that may be closed by this pull request
Real-life in-browser examples #280
Closed
Copilot AI changed the title [WIP] Add real-life in-browser examples for Pandas Add real-world examples section to the playground May 6, 2026
Copilot finished work on behalf of mrjf May 6, 2026 15:03
Copilot AI requested a review from mrjf May 6, 2026 15:03
@mrjf mrjf marked this pull request as ready for review May 6, 2026 21:43
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 8, 2026

Commit pushed: 36c66d6

Generated by Evergreen — PR Health Keeper

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 8, 2026

Evergreen: Merge with main ✅

This PR was 15 commits behind main, so I merged main into the branch (36c66d6). The merge was clean — no conflicts.

The previously failing checks (Playground E2E, Test & Lint, Validate Python Examples) may have been caused by drift from main. CI is now running on the updated branch; if any checks are still failing, Evergreen will address them on the next run.

Generated by Evergreen — PR Health Keeper · ● 3.4M · ◷

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 9, 2026

Commit pushed: 0b02dcc

Generated by Evergreen — PR Health Keeper

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 9, 2026

Evergreen: Branch updated ✅

This PR was 42 commits behind main. I merged main into the branch with a clean auto-merge (no conflicts).

The branch is now up to date. CI should run on the new HEAD 0b02dccc.

Generated by Evergreen — PR Health Keeper · ● 2.5M · ◷

github-actions Bot and others added 2 commits May 11, 2026 01:56
@github-actions
Merge remote-tracking branch 'origin/main' into copilot/add-real-life…
5ce6df0 
…-in-browser-examples
@github-actions
fix: exclude examples.html from conformance tests and make Python blo…
61f4d84 
…cks self-contained

- Add "examples.html" to NON_PLAYGROUND_PAGES in tests/playground.test.ts
  and tests-e2e/playground-cells.test.ts (it's an index/gallery page, not
  an interactive playground)
- Prepend data-setup code to each playground-python textarea block so every
  block runs independently without depending on variables from the JS editor
  or other blocks (fixes 18 Python validation failures)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 11, 2026

Commit pushed: 61f4d84

Generated by Evergreen — PR Health Keeper

1 similar comment
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 11, 2026

Commit pushed: 61f4d84

Generated by Evergreen — PR Health Keeper

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 11, 2026

Evergreen — CI fix

I pushed two commits to bring this PR up to date:

1. Merge main — incorporated 8 commits from main (ci-doctor workflow, flaky test fix, etc.). No conflicts.

2. Fix failing CI checks — addressed all 3 failing jobs:

  • Test & Lint (6 failures): examples.html is an index/gallery page linking to individual examples, not an interactive playground. Added it to NON_PLAYGROUND_PAGES in tests/playground.test.ts (and tests-e2e/playground-cells.test.ts) so the conformance tests skip it.

  • Validate Python Examples (18 failures): All <textarea class="playground-python"> blocks across 10 new example pages were referencing variables defined in the JS editor (e.g. sessions, events, log, matches, piv, etc.). Since the validator runs each block in isolation, these failed with NameError. Fixed by prepending self-contained data setup to each block.

  • Playground E2E: The E2E failure was also caused by examples.html lacking interactive playground elements — fixed by the same NON_PLAYGROUND_PAGES exclusion.

Warning

Firewall blocked 1 domain

The following domain was blocked by the firewall during workflow execution:

  • releaseassets.githubusercontent.com

To allow these domains, add them to the network.allowed list in your workflow frontmatter:

network:
  allowed:
    - defaults
    - "releaseassets.githubusercontent.com"

See Network Configuration for more information.

Generated by Evergreen — PR Health Keeper · ● 34.3M · ◷

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 11, 2026

Commit pushed: 3e3ea37

Generated by Evergreen — PR Health Keeper

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 11, 2026

Evergreen 🌲 — merged main into this branch (2 commits behind).

The merge was clean (no conflicts). CI checks should now run on the updated branch.

Generated by Evergreen — PR Health Keeper · ● 2.1M · ◷

@mrjf mrjf merged commit a56a8b5 into main May 11, 2026
5 checks passed
@mrjf mrjf deleted the copilot/add-real-life-in-browser-examples branch May 11, 2026 15:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mrjf mrjf Awaiting requested review from mrjf

Assignees

@mrjf mrjf

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Real-life in-browser examples

2 participants

@mrjf